<template>
  <div>
    <Header>
      <!-- 具名插槽 -->
      <template v-slot:head>
        购物车
      </template>
      <template v-slot:tip>
        温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算
      </template>
    </Header>
    <Box :cartList="cartData" @getSettlement="setSettlement" @getIndex="setIndex"></Box>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from '@/components/shoppingBox/header.vue';
import Box from '@/components/shoppingBox/box.vue';
import Footer from '@/components/indexBox/footer.vue'
import { mapState } from 'vuex';
export default {
  //数据调用
  computed: {
    ...mapState('cart', ['cartData'])
  },
  components: {
    Box,
    Header,
    Footer
  },
  methods: {
    //订单页面跳转
    //获取选中的商品数据
    setSettlement(totalPrice) {
      console.log(totalPrice);
      let selectedData = [];
      this.cartData.forEach(item => {
        if (item.isChecked) {
          selectedData.push(item);
        }
      });
      if (selectedData.length === 0) {
        localStorage.removeItem('selectedDate');
      } else {
        localStorage.setItem('selectedDate', JSON.stringify(selectedData));
      }
      // 执行页面跳转
      if (selectedData.length > 0) {
        // 如果有选中的项目，则执行页面跳转并传递 totalPrice
        this.$router.push({
          path: '/clearing',
          query: {
            totalPrice: totalPrice
          }
        });
      } else {
        this.$message({
          showClose: true,
          message: '请选择你想要的商品',
          type: 'warning'
        });
      }
    },
    //继续购物
    setIndex() {
      this.$router.push('home/Index')
    }
  }

}
</script>

<style scoped></style>